<template>
    <div class="test-tab">
        <!-- <h3>tab选项卡</h3> -->
        <!-- router-link  默认是a标签  但是可以设置成其他标签 -->
        <!-- <ul>
            <li>
                <router-link exact active-class="active" tag="div" :to="{path: '/'}">
                    <span class="icon"></span>
                    <p>首页</p>
                </router-link>
            </li>
            <li>
                <router-link exact active-class="active" tag="div" :to="{path: '/search'}">
                    <span class="icon"></span>
                    <p>搜索</p>
                </router-link>
            </li>
            <li>
                <router-link exact active-class="active" tag="div" :to="{path: '/collection'}">
                    <span class="icon"></span>
                    <p>收藏</p>
                </router-link>
            </li>
            <li>
                <router-link exact active-class="active" tag="div" :to="{path: '/my'}">
                    <span class="icon"></span>
                    <p>我的</p>
                </router-link>
            </li>
        </ul> -->
        <ul>
            <li v-for="item in arr" :key="item.id">
                <router-link exact active-class="active" :to="{path: item.path}">
                    <span class="icon"></span>
                    <p>{{ item.text }}</p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return {
            arr: [
                {path: '/', text:'首页',id:1},
                {path: '/search', text:'搜索',id:2},
                {path: '/collection', text:'收藏',id:3},
                {path: '/my', text:'我的',id:4}
            ]
        }
    }
}

</script>

<style lang="less">
.test-tab {
    width: 100%;
    padding: 0  20px;
    ul {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        li {
            // a {
            //     color: #000;
            // }
            font-size: 16px;
            text-align: center;
            div  , a {
                .icon {
                display: inline-block;
                    width: 24px;
                    height: 24px;
                    background:  #666;
                }
            }

            // 点击router-link组件设置高亮样式
            .active {
                color: #f00;
                .icon {
                    background: #f00;
                }
            }

        }
    }
}
</style>